<template>
	<view>
		<my-search @myclick="toSearch"></my-search>
		<view class="scroll-view-container">
			<!-- 左侧 -->
			<scroll-view class="left_scroll_view" scroll-y="true" style="background-color: #ceccc8;width: 200rpx;"
				:style="{height:wh+'px'}">
				<view v-for="(item,index) in GoodsInfo" :key="index" class="GoodNav" :class="{'active':isactive==index}"
					@click="changeGood(index)">{{item.cat_name}}</view>
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view class="right_scroll_view" :style="{height:wh+'px'}" scroll-y="true" :scroll-top="scrollTop">
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
					v-for="(item,index) in Menu2.children" :key="index">
					<view style="font-weight: 600;font-size: 20px;padding: 30rpx 0;">/{{item.cat_name}}/</view>
					<view style="display: flex;flex-wrap: wrap;">
						<view v-for="(tem,i) in item.children" :key="i">
							<view style="display: flex;flex-direction: column;margin-left: 30rpx;" @click="toGoods(tem)">
								<image style="width: 150rpx;height: 150rpx;" :src="tem.iconurl"></image>
								<text>{{tem.cat_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {mapGetters} from 'vuex'
	import badgMix from '../../mixins/tabbar-badge.js'
	export default {
		mixins:[badgMix],
		data() {
			return {
				GoodsInfo: [],
				isactive: "",
				wh: '',
				Menu2: [],
				scrollTop:0
			};
		},
		onLoad() {
			this.getGoodsTitle()
			const phoneInfo = uni.getSystemInfoSync()
			console.log(phoneInfo);
			this.wh = phoneInfo.windowHeight
		},
		methods: {
			//获取信息
			async getGoodsTitle() {
				const {
					data: res
				} = await uni.$http.get('/categories')
				if (res.meta.status === 200) {
					// console.log(res.message);
					res.message.forEach(item1 => {
						item1.children.forEach(item2 => {
							if(item2.children){
								item2.children.forEach(item3=>{
									item3.iconurl="https://api-ugo-web.itheima.net"+item3.cat_icon.split("net")[1]
								})
							}
						})
					})
					// console.log(res.message);
					this.GoodsInfo = res.message
					this.Menu2 = this.GoodsInfo[0]
				} else {
					uni.$showMsg()
				}
			},
			changeGood(index) {
				this.isactive = index
				this.Menu2 = this.GoodsInfo[index]
				this.scrollTop=this.scrollTop===0?1:0
			},
			toGoods(tem){
				uni.navigateTo({
					url:'../../subpkg/Good_list/Good_list?cid='+tem.cat_id
				})
			},
			toSearch(){
				console.log("123");
				uni.navigateTo({
					url:'../../subpkg/search/search'
				})
			}
		},
		
	}
</script>
<style scoped>
	.GoodNav {
		padding: 50rpx 0;
		text-align: center;
	}

	.active {
		border-left: 10rpx solid red;
		background-color: #ffffff;
	}

	.scroll-view-container {
		display: flex;
		justify-content: start;
	}

	.right_scroll_view {
		padding: 0 20rpx;
	}
</style>
